<template>
  <div class="swiper_cont">
    <div class="swiper_hea">
      <p @click="changges">精选专题</p>
    </div>
    <div class="swiper_foo">
      <ul>
        <li v-for="(item,index) in list.slice(0,3) " :key="index" @click="change(item.id)">
          <img :src="item.pic" alt="">
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$API
      .XQ()
      .then((res) => {
        console.log(res);
        this.list=res.data.data
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    change(id){
      this.$router.push({path:"/swipList",query:{id}})
    },
    changges(){
      this.$router.push("/swiperAll")
    }
  },
};
</script>
<style scoped>
.swiper_cont {
  width: 100%;
  height: 7rem;
  background-color: white;
  margin-top: 10px;
}
.swiper_hea {
  width: 100%;
  height: 1.2rem;
  /* // background-color: lightslategray; */
  border-bottom: 1px solid gainsboro;
  text-align: center;
  line-height: 1.2rem;
  box-sizing: border-box;
}
.swiper_hea > p {
  font-size: 0.4rem;
}
.swiper_foo {
  width: 100%;
  height: 5.8rem;
  overflow:scroll ;
}
.swiper_foo>ul{
  width: 300%;
  height: 100%;
  display: flex;
}
.swiper_foo>ul>li{
  width:100%;
  height: 100%;

}
.swiper_foo>ul>li>img{
  width: 100%;
  height: 70%;
}
.swiper_foo>ul>li>p{
  font-size: 0.3rem;
}
</style>